<template>
  <div class="input-group">
    <input v-model="amount" type="text" class="input" :placeholder="`${$t('提币数量（最小金额）')}：${restrictions.limit_amount || 0}${restrictions.unit || ''}`" />
    <div class="input-right w-80">
      <span class="link" @click="withdrawAll">{{ $t('全部提出') }}</span>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    name: {
      type: String,
      required: true
    },
    restrictions: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      amount: ''
    }
  },
  watch: {
    amount (val, oldVal) {
      this.$emit('changeInput', this.name, val)
    }
  },
  methods: {
    withdrawAll () {
      this.amount = this.restrictions.balance
    }
  }
}
</script>
<style scoped>
.input-group {
  display: flex;
  margin-bottom: 12px;
}
.input {
  flex: 1;
  height: 48px;
  line-height: 48px;
  font-size: 14px;
  padding-left: 4px;
  background-color: #f4f4f4;
  border: 1px solid #f4f4f4;
}
.input:focus {
  border: 1px solid #76bdf3;
}
.input-right {
  margin-left: 10px;
  width: 36px;
}
.w-80 {
  width: 80px;
}
.link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
</style>
